<template>
	<view>
		<Header :title="'退款详情'"></Header>
		<view class="box">
			<view class="logisticsBox">
				<view class="top">
					<view class="icon-shalou iconfont"></view>
					<view class="refundStatus" v-if="data.auditStatus==0">
						退款进行中
					</view>
					<view class="refundStatus" v-else-if="data.auditStatus==1">
						已退款
					</view>
					<view class="refundStatus" v-else-if="data.auditStatus==2">
						已驳回
					</view>
					<view class="money">
						￥{{data.number * data.unitPrice}}
					</view>
				</view>
				<view class="infoBox">
					<view class="infoItem">
						<view class="label">
							物流公司
						</view>
						<view class="value">
							{{data.companyName||'无'}}
						</view>
					</view>
					<view class="infoItem">
						<view class="label">
							运单编号
						</view>
						<view class="value">
							{{data.waybill||'无'}}
						</view>
					</view>
				</view>

			</view>
			<view class="orderBox">
				<view class="title">
					<view class="iconfont icon-dianpu"></view>
					<!-- 店铺名称 -->
					<view class="storeName">{{data.name}}</view>
				</view>
				<view class="line"></view>
				<view class="main">
					<image class="pic" :src="data.coverPictureId" mode="widthFix"></image>
					<view class="mainRight">
						<view class="shopName">
							{{data.title}}
						</view>
						<view class="price">
							￥{{data.unitPrice * data.number}}
						</view>
						<view class="number">
							x{{data.number}}
						</view>
					</view>
				</view>
				<view class="infoBox2">
					<view class="infoItem">
						<view class="label" style="flex-shrink: 0;">
							订单编号
						</view>
						<view class="value" >
							{{data.orderNumber}}
						</view>
					</view>
					<view class="infoItem">
						<view class="label" >
							订单金额
						</view>
						<view class="value" >
							￥{{data.unitPrice * data.number}}
						</view>
					</view>
					<view class="infoItem">
						<view class="label">
							申请件数
						</view>
						<view class="value">
							{{data.number}}
						</view>
					</view>
					<view class="infoItem">
						<view class="label">
							收货状态
						</view>
						<view class="value" v-if="data.state==0">
							未收货
						</view>
						<view class="value" v-else-if="data.state==1">
							已收货
						</view>
					</view>
					<view class="infoItem">
						<view class="label">
							申请原因
						</view>
						<view class="value">
							{{data.cause}}
						</view>
					</view>

				</view>
			</view>
			<view class="problem">
				<view class="problemTit">
					问题描述
				</view>
				<view class="problemText">
					{{data.description}}
				</view>

				<view class="ImgBox">
					<image v-for="item in data.picture" class="img" @click="clickImg"  :src="item" mode="aspectFill"></image>
				</view>


			</view>

		</view>


	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	import CompanyList from '@/common/js/courierServicesCompany.js'
	export default {
		data() {
			return {
				id:'',
				imgList: [],
				data:{}



			}
		},
		onLoad(e){
			if(e.id!=undefined){
				this.id=e.id
			}
		},
		onShow(){
			this.$api.request('admin/refund/client/'+this.id,'get').then(res=>{
				if(res.code==200){
					// 照片数据转数组
					if(res.data.picture==='' && res.data.picture==null){
						res.data.picture=[]
					}else{
		
						res.data.picture=res.data.picture.split(",")
						this.imgList=res.data.picture
					}
					//物流公司编码转对应 物流公司名称
					CompanyList.forEach(item=>{
						if(res.data.logistics===item.serialNumber){
							res.data.companyName=item.name
						
						}
					})
					this.data=res.data
				}
			})
		},
		components:{
			Header
		},
		methods: {
			clickImg(src) {
				wx.previewImage({
					urls: this.imgList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #F5F5F5;
		padding: 23rpx 20rpx 135rpx;
	}



	.problem {
		margin-top: 19rpx;
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 29rpx 21rpx 27rpx;
		box-sizing: border-box;

		.problemText {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			margin: 28rpx 0 31rpx;
		}

		.ImgBox {
			display: flex;
			flex-wrap: wrap;

			.img {
				width: 133rpx;
				height: 133rpx;
				background: #000000;
				border-radius: 10rpx;
				margin-right: 21rpx;
				margin-bottom: 15rpx;

				&:last-child {
					margin-right: 0;
				}
			}
		}


	}

	.logisticsBox {
		width: 710rpx;
		background: white;
		border-radius: 10rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		

		.top {
			display: flex;
			align-items: center;
			height: 91rpx;
			border-bottom: 1rpx solid #E5E5E5;
			width: 100%;

			.icon-shalou {
				color: #DF5555;
				font-size: 29rpx;
				margin-right: 17rpx;
			}

			.refundStatus {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.money {
				margin-left: auto;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #D72A2A;
			}
		}

		.infoBox {
			margin-bottom: 23rpx;

			.infoItem {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 87rpx;

				.label {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.value {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}




	.orderBox {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		.infoBox2 {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;

			.infoItem {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 87rpx;

				.label {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.value {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.title {
			height: 83rpx;
			display: flex;
			width: 100%;
			align-items: center;
			padding: 0 13rpx;

			.icon-dianpu {
				font-size: 31rpx;
				color: #333333;
				margin-right: 16rpx;
			}

			.storeName {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}

		}

		.line {
			margin: 0 15rpx 0 12rpx;
			width: 683rpx;
			height: 1rpx;
			background: #E5E5E5;
		}

		.main {
			display: flex;
			padding: 22rpx 20rpx 43rpx;
			box-sizing: border-box;

			.pic {
				margin-right: 22rpx;
				width: 155rpx;
				height: 155rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
			}

			.mainRight {
				position: relative;
				width: 100%;
				display: flex;

				.shopName {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.price {
					margin-left: auto;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.number {
					position: absolute;
					top: 50%;
					right: 0;
					transform: translateY(-50%);
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999
				}

			}

		}

		.labelBox {
			width: 100%;
			box-sizing: border-box;
			padding: 0 18rpx;

			.label {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;

				&:nth-child(1) {
					margin-bottom: 15rpx;
				}
			}
		}
	}
</style>